<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王文豪
 * @Date: 2023-09-14 09:57:51
 * @LastEditors: 王文豪
 * @LastEditTime: 2024-08-05 14:31:25
-->

<template>
    <div class="myPage">
        <div class="firstLine">
            <div class="progress">
                <el-progress class="elProgress" type="circle" :percentage="65" :width="120" :stroke-width="14"
                             stroke-linecap="square" :color="progressColor" :define-back-color="backgroundColor"
                             :show-text="false"></el-progress>
                <div class="centerPic">
                    <img src="../../assets/safeGuard.png" alt="" width="70px">
                </div>
            </div>
            <div class="description">
                <div class="tips rank">安全等级：{{ securityRank }}</div>
                <div class="tips">{{ rankTip }}</div>
            </div>
        </div>
        <div class="secondLine">
            <div class="securityItem">
                <div class="triangle">
                    <img src="../../assets/isOk.svg" alt="" width="25px">
                </div>
                <div class="pic">
                    <img src="../../assets/phoneNo.svg" alt="" width="70px">
                </div>
                <div class="name">手机号</div>
                <div class="value">{{ security.phone }}</div>
                <div class="actBtn" @click="changePhoneNo">修改手机号</div>
            </div>
            <div class="securityItem">
                <div class="triangle">
                    <img src="../../assets/isOk.svg" alt="" width="25px">
                </div>
                <div class="pic">
                    <img src="../../assets/password.svg" alt="" width="70px">
                </div>
                <div class="name">登录密码</div>
                <div class="value">定期更改密码有助于账号安全</div>
                <div class="actBtn" @click="changePassword">修改登录密码</div>
            </div>
            <div class="securityItem">
                <div class="triangle">
                    <img src="../../assets/isOk.svg" alt="" width="25px">
                </div>
                <div class="pic">
                    <img src="../../assets/mailbox.svg" alt="" width="70px">
                </div>
                <div class="name">邮箱</div>
                <div class="value">绑定邮箱有助于帮助您的账号易用</div>
                <div class="actBtn" @click="changeEmail">绑定邮箱</div>
            </div>
            <!-- <div class="securityItem noMargin">
              <div class="triangle">
                <img src="../../assets/isOk.svg" alt="" width="25px">
              </div>
              <div class="pic">
                <img src="../../assets/realName.svg" alt="" width="70px">
              </div>
              <div class="name">实名认证</div>
              <div class="value">{{ security.name + ' ' + security.certNo }}</div>
              <div class="actBtn">查看实名信息</div>
            </div> -->
        </div>


        <el-dialog title="修改手机号" :visible.sync="phoneShow" width="500px">
            <el-form :model="editForm" ref="editForm" :rules="rules">
                <el-form-item label="手机号" label-width="80px" prop="phone">
                    <el-input v-model="editForm.phone" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="phoneShow = false">取 消</el-button>
                <el-button type="primary" @click="setPhoneNo" :loading="loading">确 定</el-button>
            </div>
        </el-dialog>


        <el-dialog title="修改邮箱" :visible.sync="emailShow" width="500px">
            <el-form :model="editForm" ref="editForm" :rules="rules">
                <el-form-item label="邮箱" label-width="80px" prop="email">
                    <el-input v-model="editForm.email" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="emailShow = false">取 消</el-button>
                <el-button type="primary" @click="setEmail" :loading="loading1">确 定</el-button>
            </div>
        </el-dialog>


        <el-dialog title="修改密码" :visible.sync="passwordShow" width="500px">
            <el-form :model="editForm" ref="editForm" :rules="rules">
                <el-form-item label="原密码" label-width="100px" prop="oldPassword">
                    <el-input v-model="editForm.oldPassword" autocomplete="off" show-password></el-input>
                </el-form-item>
                <el-form-item label="新密码" label-width="100px" prop="newPassword">
                    <el-input v-model="editForm.newPassword" autocomplete="off" show-password></el-input>
                </el-form-item>
                <el-form-item label="请重复密码" label-width="100px" prop="verifyPassword">
                    <el-input v-model="editForm.verifyPassword" autocomplete="off" show-password></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="passwordShow = false">取 消</el-button>
                <el-button type="primary" @click="setPassword" :loading="loading2">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import JSEncrypt from 'jsencrypt'

export default {
    name: "safetyGuard",
    components: {},
    data() {
        return {
            progressColor: '#409EFF',//进度条颜色
            backgroundColor: '#ebeef5',//进度条底色
            securityRank: '一般',//安全等级
            rankTip: '您与安全达人仅一步之遥',
            security: {
                phone: '',
                name: '张*',
                certNo: '3213**********1624'
            },
            phoneShow: false,
            emailShow: false,
            passwordShow: false,
            loading: false,
            loading1: false,
            loading2: false,
            editForm: {
                phone: '',
                email: '',
                oldPassword: '',
                newPassword: '',
                verifyPassword: '',
            },
            rules: {
                phone: [
                    {required: true, message: '请输入手机号', trigger: 'blur'}
                ],
                email: [
                    {required: true, message: '请输入邮箱', trigger: 'blur'}
                ],
                oldPassword: [
                    {required: true, message: '请输入原密码', trigger: 'blur'}
                ],
                newPassword: [
                    {required: true, message: '请输入新密码', trigger: 'blur'}
                ],
                verifyPassword: [
                    {required: true, message: '请重复密码', trigger: 'blur'}
                ],
            }
        };
    },
    mounted() {
        this.phoneNoForShow()
    },
    destroyed() {

    },

    computed: {
        tableHeight() {
            return window.innerHeight - 370;
        },
    },
    methods: {
        /**
         * @Descripttion: 设置手机号
         * @Author: 王文豪
         * @msg:
         * @return {*}
         */
        changePhoneNo() {
            this.editForm = {
                phone: '',
                email: '',
                oldPassword: '',
                newPassword: '',
                verifyPassword: '',
            }
            this.phoneShow = true
        },
        phoneNoForShow() {
            let phoneTemp = JSON.parse(localStorage.getItem('userInfo')).phone || ''
            let aaa = phoneTemp.split('')
            let bbb = []
            if (aaa.length) {
                aaa.forEach((item, index) => {
                    if (index >= 3 && index <= 6) {
                        bbb.push('*')
                    } else {
                        bbb.push(item)
                    }
                })
            }
            this.security.phone = bbb.join('')
        },
        setPhoneNo() {
            this.$refs['editForm'].validate((valid) => {
                if (valid) {
                    let params = {
                        phone: this.editForm.phone
                    }
                    this.loading = true
                    this.$api
                        .editPhone(params)
                        .then((res) => {
                            this.loading = false
                            this.phoneShow = false
                            console.log("res=========", res);
                            this.$message.success('修改成功！')
                            this.$api.getUser({}).then((res) => {
                                this.$store.dispatch("setUserInfo", res.data);
                                localStorage.setItem("userInfo", JSON.stringify(res.data));
                                this.phoneNoForShow()
                            });
                        })
                        .catch((e) => {
                            console.log(e)
                            this.loading = false
                        });
                } else {
                    return false
                }
            })
        },
        /**
         * @Descripttion: 设置邮箱
         * @Author: 王文豪
         * @msg:
         * @return {*}
         */
        changeEmail() {
            this.editForm = {
                phone: '',
                email: '',
                oldPassword: '',
                newPassword: '',
                verifyPassword: '',
            }
            this.emailShow = true
        },
        setEmail() {
            this.$refs['editForm'].validate((valid) => {
                if (valid) {
                    let params = {
                        email: this.editForm.email
                    }
                    this.loading1 = true
                    this.$api
                        .editemail(params)
                        .then((res) => {
                            this.loading1 = false
                            this.emailShow = false
                            console.log("res=========", res);
                            this.$message.success('修改成功！')
                        })
                        .catch((e) => {
                            console.log(e)
                            this.loading1 = false
                        });
                } else {
                    return false
                }
            })
        },
        /**
         * @Descripttion: 设置密码
         * @Author: 王文豪
         * @msg:
         * @return {*}
         */
        changePassword() {
            this.editForm = {
                phone: '',
                email: '',
                oldPassword: '',
                newPassword: '',
                verifyPassword: '',
            }
            this.passwordShow = true
        },
        setPassword() {
            this.$refs['editForm'].validate((valid) => {
                if (valid) {
                    if (this.editForm.newPassword != this.editForm.verifyPassword) {
                        this.$message.warning('两次输入的新密码不一致！')
                        return
                    }
                    let username = JSON.parse(localStorage.getItem('userInfo')).phone || '';
                    this.$api.getPublicKey({username: username}).then(res => {
                        let jse = new JSEncrypt();
                        jse.setPublicKey(res.data);
                        let password = jse.encrypt(this.editForm.newPassword)
                        let params = {
                            userName: username,
                            oldPassword: jse.encrypt(this.editForm.oldPassword),
                            newPassword: password,
                            verifyPassword: password,
                        }
                        this.loading2 = true
                        this.$api.editpassword(params)
                            .then((res) => {
                                this.loading2 = false
                                this.passwordShow = false
                                console.log("res=========", res);
                                this.$message.success('修改成功！')
                            })
                            .catch((e) => {
                                console.log(e)
                                this.loading2 = false
                            });
                    });

                } else {
                    return false
                }
            })
        },
    },
}
</script>

<style scoped lang="less">
.myPage {
  // background: grey;
  // padding: 10px 20px 20px 20px;
  border-radius: 6px;
  height: 660px;
  overflow: auto;

  .firstLine {
    background: #fff;
    height: 160px;
    margin-top: 10px;
    display: flex;

    .progress {
      width: 120px;
      height: 120px;
      // background: #ef4125;
      margin: 20px;
      margin-left: 30px;
      position: relative;

      .elProgress {
        margin: auto;
        transform: rotate(180deg);
      }

      .centerPic {
        width: 70px;
        height: 70px;
        background: orange;
        position: absolute;
        top: 25px;
        left: 25px;
        border-radius: 10px;
        overflow: hidden;
      }
    }

    .description {
      height: 120px;
      width: calc(100% - 80px);
      // background: #ef4125;
      margin: 20px;
      padding: 20px 0;

      .tips {
        height: 40px;
        line-height: 40px;
        font-size: medium;
      }

      .rank {
        font-size: larger;
        font-weight: bold;
      }
    }
  }

  .secondLine {
    // background: #fff;
    height: 300px;
    margin-top: 20px;
    display: flex;

    .securityItem {
      width: calc(25% - 15px);
      height: 100%;
      background: #fff;
      margin-right: 20px;
      text-align: center;
      position: relative;

      .triangle {
        position: absolute;
        top: 0;
        right: 0;
        height: 50px;
        width: 50px;
        background-color: #6fd25d;
        clip-path: polygon(0 0, 100% 100%, 100% 0);

        img {
          position: absolute;
          right: 3px;
          top: 3px;
        }
      }

      .pic {
        height: 70px;
        // background: orange;
        width: 100px;
        margin: auto;
        margin-top: 15px;
      }

      .name {
        height: 60px;
        line-height: 60px;
        font-size: medium;
        // background: orchid;
      }

      .value {
        height: 50px;
        line-height: 40px;
        font-size: small;
        color: #8e8e8e;
        margin-top: -20px;
        // background: khaki;
      }

      .actBtn {
        height: 60px;
        line-height: 60px;
        width: 80%;
        font-size: medium;
        margin: auto;
        border: 1px solid #8e8e8e;
      }

      .actBtn:hover {
        background: rgba(241, 241, 253, 0.767);
        font-size: medium;
      }
    }

    .noMargin {
      margin: 0;
    }
  }
}
</style>
  